import React from 'react';
import { Table, Pagination, Spin, Button } from 'antd';
import { observer } from 'mobx-react';
import { WeaTextarea, WeaInputSearch, WeaAlertPage, WeaDialog } from 'ecCom';
import Templet1Store from './../../../stores/apiStore/Templet1Store';

import { WeaInputLocale, WeaLocaleProvider } from 'ecCom';

const getCurrentLabel = WeaInputLocale.getCurrentLabel;// 过滤多语言字符串
const getLabel = WeaLocaleProvider.getLabel;// 获取多语言

/**
 * 根据企业名称关键字获取企业列表，每一次请求只返回5条数据
 */

@observer
export default class Templet1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      store: new Templet1Store(),
      lvisible: false,
    };
  }
  componentWillMount() {
    const { store } = this.state;
    // console.log(this.props)
    const { init } = store;
    init(this);
  }
  componentWillReceiveProps() {
    const { store } = this.state;
    // console.log(this.props)
    const { init } = store;
    init(this);
  }
  componentDidMount() {
    const { store } = this.state;
    const { getDialog } = store;
    getDialog();
    window.addEventListener('resize', this.resizeBind);
  }
    resizeBind = () => {
      const { store } = this.state;
      const { getDialog } = store;
      getDialog();
    }
    render() {
      // const { lvisible, } = this.state;
      const { isSuccess, apiId, apiName, updata_date, fuzzyMatchList, subNameList, inputSearchValue, onSearchChange, showAlertIcon, onNameClick, testContain } = this.state.store;
      const { diaHeight, diaWidth, linkUrl, title, lvisible, closeDia } = this.state.store;
      // console.log(linkUrl)
      return (
        <div className="crm-api-temp1">
          <div id={apiId} className="section-big-title">
            <strong>{apiName}</strong>
          </div>
          <div className="group_show_single_time">{isSuccess && `${getLabel(510770, '更新时间：') + updata_date})`}
          </div>
          {/* {testContain} */}
          {this.getContainer()}
          {
            fuzzyMatchList &&
            <div className="section-big-title">
              <strong>{getLabel(510768, '猜您想搜')}</strong>
              <div className="crm-api-fuzzyMatchList">
                {subNameList}
              </div>
              <div style={{ margin: '15px 0' }}>
                <WeaInputSearch
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@kfdt0n`}
                  value={inputSearchValue}
                  placeholder={getLabel(510769, '请输入您要查看的企业名称...')}
                  onSearchChange={value => onSearchChange(value)}
                  onSearch={() => { onNameClick(inputSearchValue); }}
                  style={{ width: diaWidth - 100, maxWidth: '300px', minWidth: '200px' }}
                />
              </div>
            </div>
          }
          <WeaDialog
            ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@6imwoy`}
            onCancel={() => { closeDia(); }}
            visible={lvisible}
            style={{ width: diaWidth, height: diaHeight }}
            hasScroll
            url={linkUrl}
            title={title}
            icon="icon-coms-crm"
            iconBgcolor="#96358a"
          />
        </div >
      );
    }

    getContainer = () => {
      const { apiJson, loading, isSuccess, msgcode, columns, showAlertIcon, showSpin, apiId, apiName } = this.state.store;
      if (!loading) {
        if (isSuccess) {
          const json = JSON.parse(apiJson);
          const { data, message, sign, status } = json;
          const { total, num, items } = data;
          return (
            <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@qo55c9`} columns={columns} dataSource={items} pagination={false} scroll={{ x: '100%' }} />
          );
        }
        return (
          showAlertIcon
            ?
              <div><WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@3hyepd`}>{msgcode}</WeaAlertPage></div>
            :
            <div>{msgcode}</div>
        );
      }
      return (
        showSpin
          ?
          <div className="crm-api-span"><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@x1dfa0`} spinning={loading} size="large" tip={getLabel(384470, '正在读取数据...')} /> </div>
          :
            <div>
            <div id={apiId} className="section-big-title"><strong>{apiName}</strong> </div>
            <div>{getLabel(384470, '正在读取数据...')}</div>
          </div>
      );
    }
}
